<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .wrap {
          display: inline-block;
          border: 2px solid red;
        }
        .mask {
          width: 300px;
          height: 200px;
          padding-top: 50px;
          /* 背景图片 */
          background-image: url("/src/img/css3/ms.jpg");
          /* background-color: khaki; */
          /* background-image: url('./images/star.png') ,radial-gradient(50px at 150px 50px,red,red 100%,transparent); */
          /* 遮罩图像，第一个图像是一个五角星，第二个图像是一个半径为 50px的圆 */
          mask-image: url("/src/img/css3/star.png"), radial-gradient(50px at 50%, red, red
                100%, transparent);
          /* 遮罩图像大小，第一个宽高为 50px，第二个宽高为 100px*/
          mask-size: 50px 50px, 100px 100px;
          /* 遮罩图像位置,两个图像位置坐标都是 0 0*/
          mask-position: 0 0;
          /* 遮罩图像重复度，第一个沿x轴重复，第二个沿 x 和 y 两个方向重复 */
          mask-repeat: repeat-x, repeat;
          /* 遮罩图像延伸区域 ，第一个延伸到边框区域，第二个延伸到内容区域 */
          mask-clip: border-box, content-box;
          /* 遮罩图像定位区域 ，第一个定位区域为边框区域，第二个定位区域为内容区域 */
          mask-origin: border-box, content-box;
        }
      </style>

    <!-- 
        TIP

        前面我们学过的 mask-image、 mask-position、mask-size mask-repeat mask-clip、 mask-origin 属性都可以设置多组值，每组值之间用逗号分隔开来。
        每个属性之间用逗号分隔的值，都是按顺序一一对应的，如果对应后面的值没有写，则以当前属性设置的第一组值为默认值显示。
    -->

      <div class="wrap">
        <div class="mask"></div>
      </div>
</body>
</html>